<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手设置</title>
    <link id="theme" rel="stylesheet" href="../css/light.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: var(--background);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--text);
        }

        /* 窗口控制栏样式 */
        .window-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            -webkit-app-region: drag;
            border-bottom: 1px solid var(--border);
        }

        .window-title {
            font-weight: 600;
            font-size: 14px;
        }

        .window-buttons {
            display: flex;
            gap: 8px;
            -webkit-app-region: no-drag;
        }

        .window-btn {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-weight: bold;
        }

        .window-btn.minimize-btn {
            background: #ff5f56;
            color: white;
        }

        .window-btn.maximize-btn {
            background: #ffbd2e;
            color: white;
        }

        .window-btn.close-btn {
            background: #27ca3f;
            color: white;
        }

        .window-btn:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .settings-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .settings-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .settings-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text);
        }

        .settings-subtitle {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .ai-provider-section {
            background: var(--background-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .provider-option {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .provider-option:hover {
            background: var(--highlight);
        }

        .provider-option.active {
            border-color: var(--primary);
            background: var(--highlight);
        }

        .provider-radio {
            margin-right: 12px;
        }

        .provider-info {
            flex: 1;
        }

        .provider-name {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .provider-description {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .anythingllm-config {
            margin-top: 20px;
            padding: 16px;
            background: var(--background);
            border: 1px solid var(--border);
            border-radius: 6px;
            display: none;
        }

        .anythingllm-config.show {
            display: block;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: var(--text);
        }

        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--background);
            color: var(--text);
            font-size: 14px;
            box-sizing: border-box;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .form-help {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .workspace-section {
            margin-top: 20px;
            padding: 16px;
            background: var(--background);
            border: 1px solid var(--border);
            border-radius: 6px;
            display: none;
        }

        .workspace-section.show {
            display: block;
        }

        .workspace-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 4px;
            margin-top: 10px;
        }

        .workspace-item {
            padding: 12px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .workspace-item:last-child {
            border-bottom: none;
        }

        .workspace-item:hover {
            background: var(--highlight);
        }

        .workspace-item.selected {
            background: var(--highlight);
            border-left: 3px solid var(--primary);
        }

        .workspace-name {
            font-weight: 500;
        }

        .workspace-slug {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .status-indicator {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }

        .status-success {
            background: #d4edda;
            color: #155724;
        }

        .status-error {
            background: #f8d7da;
            color: #721c24;
        }

        .status-pending {
            background: #fff3cd;
            color: #856404;
        }

        .button-group {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 30px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn-primary {
            background: #007AFF;
            color: white;
            border: 1px solid #007AFF;
        }

        .btn-primary:hover {
            background: #0056b3;
            border-color: #0056b3;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
            border: 1px solid #6c757d;
        }

        .btn-secondary:hover {
            background: #5a6268;
            border-color: #545b62;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
        }

        /* 测试连接按钮特殊样式 */
        #testConnectionBtn {
            background: #28a745;
            border-color: #28a745;
        }

        #testConnectionBtn:hover {
            background: #218838;
            border-color: #1e7e34;
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
        }

        /* 刷新按钮特殊样式 */
        #refreshWorkspacesBtn {
            background: #17a2b8;
            border-color: #17a2b8;
        }

        #refreshWorkspacesBtn:hover {
            background: #138496;
            border-color: #117a8b;
            box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 窗口控制栏 -->
    <div class="window-controls">
        <div class="window-title">AI助手设置</div>
        <div class="window-buttons">
            <button class="window-btn minimize-btn" id="windowMinimizeBtn" title="最小化">－</button>
            <button class="window-btn maximize-btn" id="windowMaximizeBtn" title="最大化">□</button>
            <button class="window-btn close-btn" id="windowCloseBtn" title="关闭">×</button>
        </div>
    </div>

    <div class="settings-container">
        <div class="settings-header">
            <h1 class="settings-title">AI助手设置</h1>
            <p class="settings-subtitle">配置您的AI服务提供商</p>
        </div>

        <div class="ai-provider-section">
            <h3>选择AI服务提供商</h3>
            
            <div class="provider-option active" data-provider="deepseek">
                <input type="radio" name="provider" value="deepseek" class="provider-radio" checked>
                <div class="provider-info">
                    <div class="provider-name">DeepSeek</div>
                    <div class="provider-description">使用DeepSeek API进行对话，适合一般聊天和问答</div>
                </div>
            </div>

            <div class="provider-option" data-provider="anythingllm">
                <input type="radio" name="provider" value="anythingllm" class="provider-radio">
                <div class="provider-info">
                    <div class="provider-name">AnythingLLM</div>
                    <div class="provider-description">连接本地知识库，提供基于文档的智能问答</div>
                </div>
            </div>
        </div>

        <div class="anythingllm-config" id="anythingllmConfig">
            <h4>AnythingLLM 配置</h4>
            
            <div class="form-group">
                <label class="form-label" for="anythingllmUrl">服务器地址</label>
                <input type="url" id="anythingllmUrl" class="form-input" 
                       placeholder="http://localhost:3001" 
                       value="http://localhost:3001">
                <div class="form-help">AnythingLLM服务器的完整URL地址</div>
            </div>

            <div class="form-group">
                <label class="form-label" for="anythingllmApiKey">API密钥</label>
                <input type="password" id="anythingllmApiKey" class="form-input" 
                       placeholder="请输入您的AnythingLLM API密钥">
                <div class="form-help">在AnythingLLM设置中生成的API密钥</div>
            </div>

            <div class="form-group">
                <button type="button" id="testConnectionBtn" class="btn btn-secondary">
                    <span id="testConnectionText">测试连接</span>
                </button>
                <span id="connectionStatus"></span>
            </div>
        </div>

        <div class="workspace-section" id="workspaceSection">
            <h4>选择工作区</h4>
            <p class="form-help">选择要用于对话的AnythingLLM工作区</p>
            
            <button type="button" id="refreshWorkspacesBtn" class="btn btn-secondary">
                <span id="refreshWorkspacesText">刷新工作区列表</span>
            </button>
            
            <div class="workspace-list" id="workspaceList">
                <div class="workspace-item">
                    <div>请先测试连接并获取工作区列表</div>
                </div>
            </div>
        </div>

        <!-- 移除语音识别设置部分 -->
        <!-- <div style="margin-top: 30px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-background);">
            <h3 style="margin-top: 0; color: var(--text-primary);">🎤 语音识别设置</h3>
            <p style="color: var(--text-secondary); font-size: 14px; margin-bottom: 15px;">
                配置豆包语音识别服务，为所有输入框添加语音转文字功能
            </p>
            <button type="button" id="voiceSettingsBtn" class="btn btn-secondary" style="margin-bottom: 0;">
                配置豆包语音识别
            </button>
        </div> -->

        <div class="button-group">
            <button type="button" id="cancelBtn" class="btn btn-secondary">取消</button>
            <button type="button" id="saveBtn" class="btn btn-primary">保存设置</button>
        </div>
    </div>

    <script src="../js/aiSettings.js"></script>
</body>
</html> 